<template>
  <div class="p-6 space-y-6">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-white mb-2 animate-glow">{{ t('policyPush') }}</h1>
      <p class="text-electric-500">{{ t('intelligentPolicyPushManagement') }}</p>
    </div>

    <!-- 标签页 -->
    <div class="flex space-x-1 glass-card p-1 rounded-xl">
      <button
        @click="activeTab = 'create'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'create'
            ? 'bg-electric-500 text-cyber-50'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        {{ t('createPush') }}
      </button>
      <button
        @click="activeTab = 'history'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'history'
            ? 'bg-electric-500 text-cyber-50'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        {{ t('pushHistory') }}
      </button>
    </div>

    <!-- 创建推送标签页 -->
    <div v-if="activeTab === 'create'" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 创建表单 -->
      <div class="lg:col-span-2 glass-card p-6">
        <h3 class="text-xl font-semibold text-white mb-6 flex items-center">
          <Send class="w-5 h-5 mr-2 text-tech-blue-400" />
          创建新推送
        </h3>
        
        <form @submit.prevent="handleSubmit" class="space-y-6">
          <div>
            <label class="block text-white text-sm font-medium mb-2">推送标题</label>
            <input
              v-model="formData.title"
              type="text"
              class="cyber-input"
              placeholder="输入推送标题..."
              required
            />
          </div>

          <div>
            <label class="block text-white text-sm font-medium mb-2">推送内容</label>
            <textarea
              v-model="formData.content"
              rows="6"
              class="cyber-input resize-none"
              placeholder="输入推送内容..."
              required
            ></textarea>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-white text-sm font-medium mb-2">政策类别</label>
              <select v-model="formData.category" class="cyber-input">
                <option value="财税政策">财税政策</option>
                <option value="产业政策">产业政策</option>
                <option value="金融政策">金融政策</option>
                <option value="环保政策">环保政策</option>
              </select>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">推送对象</label>
              <select v-model="formData.recipients" class="cyber-input">
                <option value="all">全部用户</option>
                <option value="enterprise">企业用户</option>
                <option value="individual">个人用户</option>
                <option value="premium">高级用户</option>
              </select>
            </div>
          </div>

          <div>
            <label class="block text-white text-sm font-medium mb-2">推送时间</label>
            <div class="space-y-3">
              <label class="flex items-center space-x-3">
                <input
                  v-model="formData.scheduleType"
                  type="radio"
                  value="immediate"
                  class="w-4 h-4 text-electric-500"
                />
                <span class="text-white">立即推送</span>
              </label>
              <label class="flex items-center space-x-3">
                <input
                  v-model="formData.scheduleType"
                  type="radio"
                  value="scheduled"
                  class="w-4 h-4 text-electric-500"
                />
                <span class="text-white">定时推送</span>
              </label>
            </div>
            
            <div v-if="formData.scheduleType === 'scheduled'" class="mt-3">
              <input
                v-model="formData.scheduledTime"
                type="datetime-local"
                class="cyber-input"
              />
            </div>
          </div>

          <div class="flex space-x-4">
            <button
              type="submit"
              class="flex-1 cyber-button"
            >
              {{ formData.scheduleType === 'immediate' ? '立即推送' : '安排推送' }}
            </button>
            <button
              type="button"
              class="px-6 py-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors font-medium"
            >
              保存草稿
            </button>
          </div>
        </form>
      </div>

      <!-- 统计和设置 -->
      <div class="space-y-6">
        <div class="glass-card p-6">
          <h4 class="text-lg font-semibold text-white mb-4 flex items-center">
            <Users class="w-5 h-5 mr-2 text-green-400" />
            推送统计
          </h4>
          <div class="space-y-4">
            <div class="flex justify-between items-center">
              <span class="text-white/70">今日推送</span>
              <span class="text-white font-semibold">145</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-white/70">本月推送</span>
              <span class="text-white font-semibold">3,421</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-white/70">总用户数</span>
              <span class="text-white font-semibold">12,847</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-white/70">在线用户</span>
              <span class="text-green-400 font-semibold">2,134</span>
            </div>
          </div>
        </div>

        <div class="glass-card p-6">
          <h4 class="text-lg font-semibold text-white mb-4 flex items-center">
            <Settings class="w-5 h-5 mr-2 text-electric-500" />
            推送设置
          </h4>
          <div class="space-y-3">
            <label class="flex items-center justify-between">
              <span class="text-white/70">自动推送</span>
              <input type="checkbox" class="toggle" checked />
            </label>
            <label class="flex items-center justify-between">
              <span class="text-white/70">推送提醒</span>
              <input type="checkbox" class="toggle" checked />
            </label>
            <label class="flex items-center justify-between">
              <span class="text-white/70">批量推送</span>
              <input type="checkbox" class="toggle" />
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- 推送历史标签页 -->
    <div v-else class="glass-card p-6">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-xl font-semibold text-white flex items-center">
          <Bell class="w-5 h-5 mr-2 text-yellow-400" />
          推送历史
        </h3>
        <button class="cyber-button flex items-center space-x-2">
          <Filter class="w-4 h-4" />
          <span>筛选</span>
        </button>
      </div>

      <div class="space-y-4">
        <div
          v-for="message in pushHistory"
          :key="message.id"
          class="bg-white/5 rounded-lg p-4 hover:bg-white/10 transition-colors"
        >
          <div class="flex items-start justify-between mb-3">
            <div class="flex-1">
              <h4 class="text-lg font-semibold text-white mb-1">{{ message.title }}</h4>
              <p class="text-white/70 text-sm mb-2">{{ message.content }}</p>
              <div class="flex items-center space-x-4 text-xs text-electric-500">
                <span>类别: {{ message.category }}</span>
                <span>推送人数: {{ message.recipients }}</span>
                <span>创建时间: {{ message.createdAt }}</span>
                <span v-if="message.scheduledAt">排期时间: {{ message.scheduledAt }}</span>
              </div>
            </div>
            <span :class="getStatusClass(message.status)">
              {{ getStatusText(message.status) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  Bell, 
  Send, 
  Users, 
  Settings, 
  Filter 
} from 'lucide-vue-next'
import { themeState } from '../services/themeService.js'

export default {
  name: 'PolicyPush',
  components: {
    Bell,
    Send,
    Users,
    Settings,
    Filter
  },
  inject: ['globalState'],
  computed: {
    themeState() {
      return themeState
    },
    currentLanguage() {
      return this.globalState.currentLanguage
    },
    translations() {
      return {
        zh: {
          policyPush: '政策推送',
          intelligentPolicyPushManagement: '智能政策信息推送管理',
          createPush: '创建推送',
          pushHistory: '推送历史'
        },
        en: {
          policyPush: 'Policy Push',
          intelligentPolicyPushManagement: 'Intelligent Policy Information Push Management',
          createPush: 'Create Push',
          pushHistory: 'Push History'
        }
      }
    }
  },
  data() {
    return {
      activeTab: 'create',
      formData: {
        title: '',
        content: '',
        category: '财税政策',
        recipients: 'all',
        scheduleType: 'immediate',
        scheduledTime: ''
      },
      pushHistory: [
        {
          id: 1,
          title: '新税收优惠政策发布',
          content: '财政部发布最新小微企业税收优惠政策，涉及增值税、企业所得税等多项减免措施...',
          category: '财税政策',
          recipients: 1245,
          status: 'sent',
          createdAt: '2024-01-15 10:30:00'
        },
        {
          id: 2,
          title: '数字化转型补贴通知',
          content: '工信部发布制造业数字化转型专项扶持政策，符合条件的企业可申请最高500万补贴...',
          category: '产业政策',
          recipients: 856,
          status: 'sent',
          createdAt: '2024-01-14 09:15:00'
        },
        {
          id: 3,
          title: '环保政策解读会议通知',
          content: '关于碳达峰碳中和行动方案的政策解读会议将于本周五召开，请相关企业代表准时参加...',
          category: '环保政策',
          recipients: 432,
          status: 'scheduled',
          createdAt: '2024-01-13 14:20:00',
          scheduledAt: '2024-01-18 09:00:00'
        }
      ]
    }
  },
  methods: {
    t(key, params = {}) {
      let text = this.translations[this.currentLanguage.value || this.currentLanguage][key] || key
      Object.keys(params).forEach(param => {
        text = text.replace(`{${param}}`, params[param])
      })
      return text
    },
    
    handleSubmit() {
      console.log('推送消息:', this.formData)
      // 这里实现推送逻辑
    },
    getStatusClass(status) {
      const baseClass = 'px-3 py-1 rounded-full text-xs font-medium'
      switch (status) {
        case 'sent': 
          return `${baseClass} bg-green-500/20 text-green-300`
        case 'scheduled': 
          return `${baseClass} bg-yellow-500/20 text-yellow-300`
        case 'draft': 
          return `${baseClass} bg-tech-blue-500/20 text-tech-blue-300`
        default: 
          return `${baseClass} bg-gray-500/20 text-gray-300`
      }
    },
    getStatusText(status) {
      switch (status) {
        case 'sent': return '已发送'
        case 'scheduled': return '已排期'
        case 'draft': return '草稿'
        default: return '未知'
      }
    }
  }
}
</script> 